<script type="text/javascript">
$(function() {
	$('#left, #right').attr('style', 'height: ' + ($(window).height()-87) + 'px;');
	$('#right_s').attr('style', 'height: ' + ($('#right').height()-246) + 'px;');
});
</script>
<style type="text/css">
<!--
#left {
	overflow:auto;
	border: 3px solid #CACACA;
	float: left;
	width: 565px;
}
#left td {
	background-color: #C3C3C3;
	height: 140px;
	width: 100px;
}
.wm {
	overflow: hidden;
	padding: 5px;
	width: 820px;
}
#right {
	width: 245px;
	float: left;
	border-top-width: 3px;
	border-right-width: 3px;
	border-bottom-width: 3px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-top-color: #CACACA;
	border-right-color: #CACACA;
	border-bottom-color: #CACACA;
}
#right_s {
	overflow:auto;
	padding: 5px;
	height: 260px;
	width: 100%;
	bottom: 0px;
}
#right_x {
	height: 240px;
	border-top-width: 3px;
	border-top-style: dashed;
	border-top-color: #CACACA;
	text-align: center;
}

#right_x img{
	margin-top : 15px;
	margin-left: 15px;
}
#right_s table {
	background-color: #C3C3C3;
}
#right_s table tr {
	height: 35px;
	background-color: #FFFFFF;
	text-align: center;
}
.wm #left td div {
	text-align: center;
}


-->
</style>
<div class="wm">
	<div id="left" style="height: 100%;">
	  <table width="200" border="0" cellpadding="0" cellspacing="5">
	    <tr>
	      <td><div canId="" username="" poll=""><img src="" height="180" width="130" /><br/><span></span></div></td>  
	      <td><div canId="" username="" poll=""><img src="" height="180" width="130" /><br/><span></span></div></td>  
	      <td><div canId="" username="" poll=""><img src="" height="180" width="130" /><br/><span></span></div></td>  
	      <td><div canId="" username="" poll=""><img src="" height="180" width="130" /><br/><span></span></div></td>  
	    </tr>
	  </table>
	</div>
	<div id="right">
		<div id="info" style="width: 100%;text-align: center;"></div>
		<div id="right_s">
		  <table width="233" border="0" align="left" cellpadding="2" cellspacing="1">
            <tr>
              <td width="78"><span id="username">姓名</samp></td>
              <td width="69"><span id="poll">票数</span></td>
              <td width="70"><span id="action">动作</span></td>  
            </tr>
          </table>
		</div>
          <div style="width: 100%;text-align: center;">拖拽到表格里面</div>
		<div id="right_x"><img src="imgs/queryIcon.jpg" /><br/><br/>
		拖拽到这里可以查看详细信息</div>
	</div>  
</div>
<script type="text/javascript">
function mmssaa() {
	//console.info('mmssaa');
}
$(function() {
	initCandidateInfo();
	$('.wm #left table td').dblclick(function(){
		var canId = $($(this).find('div')[0]).attr('canId');
		if(canId) {
			openInfoUI(canId);
		}
	});
	//$('.wm table td').dblclick(function(){
	//	//console.info(this);
	//});
	$('#right #info').html(categoryList[currVoteCateIndex].name +'：限选<font color="red">'+categoryList[currVoteCateIndex].amount+'</font>名');
});

var disabledDivCanId = '';
function receiveDraggable(){
	$('#right_s').droppable({
		onDragEnter:function(e,source){  
		    $(source).draggable('options').cursor='auto'; 
		},
		onDragLeave:function(e,source){  
		    $(source).draggable('options').cursor='not-allowed';  
		},  
		onDrop:function(e,source){ 
			if(categoryList[currVoteCateIndex].amount == $('#right_s table tr').length - 1) {
				topRight('限选人数已满！');
			}else {
			    var tr = $($('#right_s table tr')[0]).clone(true);
			    $(tr).find('span[id=username]').html($(source).attr('username'));
			    $(tr).find('span[id=poll]').html($(source).attr('poll'));
			    $(tr).find('span[id=action]').html('<a href="javascript:void(0)" onclick="deleteTr('+$(source).attr('canId')+')">删除</a>');
			    $(tr).attr('canId', $(source).attr('canId'));
			    $('#right_s table').append(tr);
			    
			    if(disabledDivCanId == '') {
			   		disabledDivCanId = '[canId!='+$(source).attr('canId')+']';
			    }else {
			   		disabledDivCanId = disabledDivCanId + '[canId!='+$(source).attr('canId')+']';
			    }
			    
			    $('#right_s').droppable({accept : '#left td div' + disabledDivCanId});
			}
		}  
	}); 
	
	$('#right_x').droppable({
		onDragEnter:function(e,source){  
		    $(source).draggable('options').cursor='auto'; 
		},
		onDragLeave:function(e,source){  
		    $(source).draggable('options').cursor='not-allowed';  
		},  
		onDrop:function(e,source){ 
			openInfoUI($(source).attr('canId'));
		}  
	});
}

function deleteTr(canId) {
	$('#right_s tr[canId='+canId+']').remove();
	
	disabledDivCanId = '';
	$('#right_s tr[canId]').each(function(i,d) {
	    if(disabledDivCanId == '') {
	   		disabledDivCanId = '[canId!='+$(d).attr('canId')+']';
	    }else {
	   		disabledDivCanId = disabledDivCanId + '[canId!='+$(d).attr('canId')+']';
	    }
	    
	});
    $('#right_s').droppable({accept : '#left td div' + disabledDivCanId});
}

function initDraggable() {
	$('.wm #left td div').draggable({  
        revert:true,  
        proxy:'clone',  
        onStartDrag:function(){  
            $(this).draggable('options').cursor = 'move';  
            $(this).draggable('proxy').css('z-index',10);  
        },  
        onStopDrag:function(){  
            $(this).draggable('options').cursor='move';  
        }  
    });
}

var canList = null;
function initCandidateInfo() {
	$.getJSON("candidateAction!getByCatId.action", {catId : categoryList[currVoteCateIndex].catId}, function(data){
		canList = data;
		var j = canList.length;
		for(var i = 0; i < parseInt((j + 3)/4 - 1); i++) {
			var tr = $($('#left table tr')[0]).clone(true);
			$('#left table').append(tr);
		}
		
		var trList = $('#left table td');
		$.each(canList, function(index, value) {
			$(trList[index]).find('div').attr('canId',value.canId);
			$(trList[index]).find('div').attr('poll',value.poll);
			$(trList[index]).find('div').attr('username',value.username);
			$(trList[index]).find('img').attr('src','imgs/vote/' + value.pictureFileName);
			$(trList[index]).find('span').html('姓名:'+value.username+', 票数:' + value.poll);
		});
		
		initDraggable();
		receiveDraggable();
		$("#left table td img[src='']").remove();
	});
}
</script>
